@charset "utf-8";
@import "common/reset";
@function p($px) {
    @return $px/2+px;
}

.web {
    width: 100%;
    //首页
    .test {
        position: relative;
        height: p(1332);
        background: #000000;
        width: 100%;
        .ind {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            .load {
                width: p(274);
                height: p(44);
                overflow: hidden;
                animation-duration: 1s;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                    vertical-align: top;
                }
            }
            .loade {
                color: #325a7d;
            }
        }
    }
    //游戏开始界面
    .game {
        width: 100%;
        height: p(1332);
        background: #000000;
        position: relative;
        .game_ind {
            width: 100%;
            height: 100%;
            background: url(../img/Mc_bg.jpg) no-repeat;
            background-size: auto;
            position: relative;
            .logo {
                width: p(175);
                height: p(83);
                overflow: hidden;
                float: right;
                margin-top: p(140);
                margin-right: p(60);
                margin-bottom: p(60);
                img {
                    width: 100%;
                }
            }
            .ai {
                width: p(558);
                height: p(350);
                overflow: hidden;
                margin: auto;
                margin-bottom: p(70);
                img {
                    width: 100%;
                }
            }
            .go,
            .guze,
            .rank {
                width: p(388);
                height: p(108);
                overflow: hidden;
                margin: auto;
                img {
                    width: 100%;
                }
            }
            .te {
                position: absolute;
                bottom: p(120);
                left: 50%;
                transform: translateX(-50%);
                p {
                    font-size: p(30);
                    color: #245066;
                }
            }
        }
        .jiu {
            position: absolute;
            bottom: 0px;
            width: 100%;
            height: p(98);
            background: url(../img/Mc_bg_ad.jpg) no-repeat;
            background-size: cover;
            text-align: center;
            .zi,
            .niu {
                width: p(146);
                height: p(46);
                overflow: hidden;
                display: inline-block;
                margin-top: p(36);
                margin-left: p(20);
                img {
                    width: 100%;
                    vertical-align: top;
                }
            }
        }
    }
    //游戏规则
    .gui_top {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(0);
        transition-duration: 1s;
        .guiz {
            width: 100%;
            height: p(1332);
            background: url(../img/Mc_bg.jpg);
            background-size: contain;
            position: relative;
            .guiding {
                width: p(608);
                height: p(800);
                overflow: hidden;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                img {
                    width: 100%;
                }
            }
            .guibtn {
                width: p(388);
                height: p(108);
                overflow: hidden;
                position: absolute;
                bottom: p(108);
                left: 50%;
                transform: translateX(-50%);
                img {
                    width: 100%;
                }
            }
        }
    }
    //开始游戏
    .game_one {
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        width: 100%;
        height: p(1332);
        background: url(../img/Mc_bg.jpg) no-repeat;
        background-size: contain;
        .game_two {
            position: relative;
            width: 100%;
            height: 100%;
            .time {
                display: inline-block;
                position: relative;
                top: p(90);
                left: 0px;
                .time_noe {
                    width: p(352);
                    height: p(84);
                    overflow: hidden;
                    img {
                        width: 100%;
                    }
                }
                .time_two {
                    width: p(194);
                    height: p(39);
                    overflow: hidden;
                    position: absolute;
                    top: p(22);
                    left: p(124);
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .gera {
                display: inline-block;
                position: relative;
                top: p(90);
                margin-left: p(102);
                p {
                    position: absolute;
                    top: p(20);
                    left: p(66);
                    font-size: p(30);
                    color: #fff;
                }
                .shu {
                    width: p(285);
                    height: p(84);
                    overflow: hidden;
                    img {
                        width: 100%;
                    }
                }
            }
            .rea,
            .GO {
                position: absolute;
                left: 25%;
                top: 44%;
                // transform: translate(-50%,-50%);
                width: p(439);
                height: p(170);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .rea {
                transform: scale(0);
            }
            .GO {
                opacity: 0;
            }
            @keyframes dong {
                0% {
                    transform: scale(0);
                }
                50% {
                    transform: scale(1.2);
                }
                100% {
                    transform: scale(0);
                }
            }
            .real {
                animation-name: dong;
                animation-duration: 1s;
            }
            .gol {
                animation-name: do;
                animation-delay: 800ms;
                animation-duration: 500ms;
            }
            @keyframes do {
                0% {
                    opacity: 0;
                }
                90% {
                    opacity: 1;
                }
                100% {
                    opacity: 0;
                }
            }
            .xij_noe {
                margin-top: p(84);
                height: p(1158);
                width: 100%;
                padding-bottom: p(30);
                position: relative;
                overflow: hidden;
                .xi0 {
                    width: p(165);
                    height: p(165);
                    overflow: hidden;
                    display: inline-block;
                    position: absolute;
                    top: 30%;
                    left: 25%;
                    img {
                        width: 100%;
                    }
                }
                .xi1 {
                    width: p(165);
                    height: p(165);
                    overflow: hidden;
                    display: inline-block;
                    position: absolute;
                    top: 30%;
                    left: 20%;
                    img {
                        width: 100%;
                    }
                }
                .xi2 {
                    width: p(165);
                    height: p(165);
                    overflow: hidden;
                    display: inline-block;
                    position: absolute;
                    top: 10%;
                    left: 40%;
                    img {
                        width: 100%;
                    }
                }
                .xi3 {
                    width: p(165);
                    height: p(165);
                    overflow: hidden;
                    display: inline-block;
                    position: absolute;
                    top: 60%;
                    left: 60%;
                    img {
                        width: 100%;
                    }
                }
                .xi4 {
                    width: p(165);
                    height: p(165);
                    overflow: hidden;
                    display: inline-block;
                    position: absolute;
                    top: 70%;
                    left: 50%;
                    img {
                        width: 100%;
                    }
                }
                .xi5 {
                    width: p(165);
                    height: p(165);
                    overflow: hidden;
                    display: inline-block;
                    position: absolute;
                    bottom: 40%;
                    left: 10%;
                    img {
                        width: 100%;
                    }
                }
                .xi1,
                .xi3,
                .xi4 {
                    animation-name: guan;
                    animation-duration: 3s;
                }
                .xi2 {
                    animation-name: gua;
                    animation-duration: 3s;
                }
                .xi0 {
                    animation-name:gu;
                    animation-duration: 3s;
                }
                @keyframes gu {
                    0% {
                        transform: translateX(P(30));
                    }
                    20% {
                        transform: translateX(p(180));
                    }
                    50% {
                        transform: translateY(p(180));
                    }
                    80% {
                        transform: translateX(p(200));
                    }
                    100% {
                        transform: translateY(p(160));
                    }
                }
                @keyframes guan {
                    0% {
                        transform: translateX(P(0));
                    }
                    20% {
                        transform: translateX(p(120));
                    }
                    50% {
                        transform: translateY(p(120));
                    }
                    80% {
                        transform: translateX(p(120));
                    }
                    100% {
                        transform: translateX(60px);
                    }
                }
                @keyframes gua {
                    0% {
                        transform: translateX(P(0));
                    }
                    20% {
                        transform: translateX(p(120));
                    }
                    40% {
                        transform: translateY(p(120));
                    }
                    60% {
                        transform: translateY(p(120));
                    }
                    80% {
                        transform: translateX(p(120));
                    }
                    100% {
                        transform: translateY(180px);
                    }
                }
            }
        }
    }
    //游戏结束
    .finish {
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        width: 100%;
        height: p(1332);
        background: rgba(42, 42, 42, 0.5);
        .finsh_one {
            position: relative;
            width: 100%;
            height: 100%;
            .over {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: p(640);
                height: p(697);
                overflow: hidden;
                background: url(../img/end.png) no-repeat;
                background-size: contain;
                .over_one {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    .end {
                        position: absolute;
                        top: 70%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        text-align: center;
                        .end_one {
                            width: p(175);
                            height: p(37);
                            overflow: hidden;
                            display: inline-block;
                            img {
                                width: 100%;
                            }
                        }
                        p {
                            display: inline-block;
                            color: #f05305;
                            vertical-align: top;
                        }
                        .end_two {
                            display: inline-block;
                            width: p(35);
                            height: p(37);
                            overflow: hidden;
                            img {
                                width: 100%;
                            }
                        }
                        .end_three {
                            width: p(310);
                            height: p(74);
                            overflow: hidden;
                            img {
                                width: 100%;
                            }
                        }
                        .inp {
                            background: #EDEDED;
                            border: none;
                            border-radius: p(48);
                            height: p(70);
                            margin-top: p(20);
                            padding-left: p(20);
                            box-shadow: inset p(1) p(1) p(1) #a7a7a7;
                        }
                    }
                }
            }
            .submit {
                width: p(388);
                height: p(112);
                overflow: hidden;
                position: absolute;
                bottom: p(150);
                left: 24%;
                img {
                    width: 100%;
                }
            }
        }
    }
    //提交成功
    .put {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: p(1332);
        background: rgba(42, 42, 42, 0.5);
        display: none;
        .put_one {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            .win {
                width: p(640);
                height: p(696);
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .flaunt {
                width: p(382);
                height: p(101);
                overflow: hidden;
                margin-left: p(130);
                img {
                    width: 100%;
                }
            }
            .recur {
                width: p(388);
                height: p(108);
                overflow: hidden;
                margin-left: p(130);
                margin-top: p(20);
                img {
                    width: 100%;
                }
            }
        }
    }
    //分享
    .share {
        position: absolute;
        width: 100%;
        height: p(1332);
        top: 0;
        left: 0;
        background: rgba(42, 42, 42, 0.5);
        display: none;
        .play {
            width: p(279);
            height: p(336);
            overflow: hidden;
            float: right;
            right: 0;
            img {
                width: 100%;
            }
        }
    }
    //炸弹
    .zha {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: p(1332);
        background: #fff;
        transform: scale(0);
        transition: 400ms;
    }
}